<template>
  <div class="FieldTable">
    <HEditTable v-model:data="rawData" :showAllEdit="true" :isEdit="false" :columns="column">
      <template #title>
        <div class="mb-2">
          <a-button type="primary" @click="handleAdd">新增</a-button>
          <a-button danger class="ml-2" @click="handleDelMutil">删除</a-button>
          <a-button class="ml-2" @click="getDBFeilds">库表获取</a-button>
        </div>
      </template>
      <template #action="{ index }">
        <a-button type="link" class="!mx-1 !px-0" @click.stop="handleDel(index)">删除 </a-button>
      </template>
    </HEditTable>
  </div>
</template>

<script lang="ts">
  import { ref, computed, defineComponent, onMounted, watch } from 'vue';
  import { HEditTable, EditColumn } from '/@/components/HEditTable';

  import { useMessage } from '/@/hooks/web/useMessage';

  import { getFieldsFromDbListApi } from '/@/api/config-center/model-design';

  export default defineComponent({
    name: 'FieldTable',
    components: {
      HEditTable,
    },
    props: ['data', 'dataSource', 'tableCode'],
    emits: ['update:data'],
    setup(props, { emit }) {
      const { createMessage } = useMessage();
      const rawData = computed({
        get() {
          return props.data || [];
        },
        set(v) {
          emit('update:data', v);
        },
      });
      const changeValue = () => {
        emit('update:data', rawData);
      };

      onMounted(() => {
        rawData.value = props.data || [];
      });
      const displayTypeList = ref<any[]>([
        {
          label: '显示',
          value: 1,
        },
        {
          label: '隐藏',
          value: 0,
        },
      ]);

      const column: EditColumn[] = [
        {
          label: '字段名称',
          dataIndex: 'label',
          component: 'Input',
          componentProps: {
            placeholder: '请输入名称',
          },
        },
        {
          label: '字段编码',
          dataIndex: 'field',
          component: 'Input',
          componentProps: {
            placeholder: '请输入编码',
          },
        },
        {
          label: '字段宽度',
          dataIndex: 'width',
          component: 'Input',
          class: 'w-40',
          componentProps: {
            placeholder: '请输入字段宽度',
          },
        },
        {
          label: '显示类型',
          dataIndex: 'ifShow',
          component: 'RadioGroup',
          class: 'w-40',
          componentProps: (_) => {
            return {
              defaultValue: 1,
              options: displayTypeList.value,
            };
          },
          format(v) {
            const info = displayTypeList.value.find((el) => el.value === v);

            if (info) return info.label;
            return v;
          },
        },
        {
          dataIndex: '',
          label: '操作',
          slot: 'action',
          class: 'w-20',
        },
      ];

      const getDBFeilds = async () => {
        const { dataSource, tableCode } = props;
        const data = await getFieldsFromDbListApi({ dataSource, tableCode });

        setTitles(data);
        createMessage.success('操作成功');
      };
      async function setTitles(data: any[]) {
        if (!data) return;
        let name = 'label';
        let code = 'field';

        const dataIndexs = rawData.value.map((el) => el[code]);

        const newDataInexs = data
          .filter((el) => !dataIndexs.includes(el.name))
          .map((el) => ({ [name]: el.title || el.name, [code]: el.name, ifShow: 1 }));

        if (newDataInexs.length) {
          rawData.value = rawData.value.concat(newDataInexs);
        }
      }

      watch(
        () => props.tableCode,
        (code) => {
          rawData.value = [];
          code && getDBFeilds();
        },
      );
      function handleAdd() {
        const item = {
          ifShow: '1',
        };
        rawData.value.push(item);
        createMessage.success('操作成功');
      }
      const handleDelMutil = () => {
        const arr = rawData.value || [];
        const data = arr.filter((el) => el.check);
        if (!data.length) {
          createMessage.warn('请先选择要删除的列', 0.8);
          return;
        }

        rawData.value = arr.filter((el) => !el.check);
      };
      const handleDel = (index) => {
        rawData.value.splice(index, 1);
      };
      return {
        column,
        rawData,
        getDBFeilds,
        changeValue,
        handleAdd,
        handleDelMutil,
        handleDel,
      };
    },
  });
</script>
<style lang="less" scoped>
  .my-table {
    text-align: center;

    .thead {
      height: 51px;
      line-height: 51px;
      background: #edf3fc;
      box-shadow: 0px 4px 4px -3px #dde6f1, inset 0px 1px 4px -3px #35629a;
      border-bottom: 1px solid #bad3f1;
    }

    .th-item {
      padding: 12px 0;
      font-size: 14px;
      font-weight: 400;
      color: #262626;
      line-height: 52px;
      height: 52px;

      &:hover {
        background: #f4f8ff;
        box-shadow: 0px 4px 4px -3px #e9edf3;
      }

      .th-drag {
        &:hover {
          cursor: grab;
          background: #edf3fc;
          box-shadow: 0px 4px 4px -3px #dde6f1, inset 0px 1px 4px -3px #35629a;
        }
      }
    }
  }
</style>
